<!-- 展商详情 ：主视区 -->
<template>
  <div class="m" v-if="cid && companyInfo">
    <div class="m_l">
      <div class="m_l_zoom">
        <div class="imgBox">
          <img :src="companyInfo.logo" alt="" class="img" v-if="companyInfo.logo" />
          <img :src="defaultImg" alt="" class="img" v-else />
        </div>
      </div>
    </div>
    <div class="m_r" v-if="companyInfo" :class="localeCn ? '' : 'en'">
      <!-- 基本描述 -->
      <div class="m_r_descBox">
        <h4 class="m_r_t">{{ localeCn?companyInfo.companyName:companyInfo.companyNameEn||companyInfo.companyName }}</h4>
        <!-- 展位号 -->
        <div class="m_r_txt">
          <p class="lr" :class="{ en: localeEn }">
            <span class="key">{{ $t("exhibitor.detail.booth") }}</span>
            <span class="val">{{ companyInfo.standNo ? companyInfo.standNo : $t("noData") }}</span>
          </p>
        </div>
        <!-- 展商类别 -->
        <div class="m_r_txt">
          <p class="lr" :class="{ en: localeEn }">
            <span class="key">{{ $t("exhibitor.detail.category") }}</span>
            <span class="val">{{ labels ? labels : $t("noData") }}</span>
          </p>
        </div>
        <!-- 展位类型 -->
        <div class="m_r_txt">
          <p class="lr" :class="{ en: localeEn }">
            <span class="key">{{ $t("exhibitor.detail.standType") }}</span>
            <span class="val">{{ standType ? standType : $t("noData") }}</span>
          </p>
        </div>
        <!-- 面积 -->
        <div class="m_r_txt">
          <p class="lr" :class="{ en: localeEn }">
            <span class="key">{{ $t("exhibitor.detail.area") }}</span>
            <span class="val">{{ companyInfo.area ? companyInfo.area : $t("noData") }} <span v-if="companyInfo.area">m2</span></span>
          </p>
        </div>
        <!-- 简介 -->
        <div class="m_r_txt m_r_descBox">
          <div class="lr" :class="{ en: localeEn }">
            <span class="key">{{ $t("exhibitor.detail.content") }}</span>
            <div class="val text_e" v-html="companyInfo.companyDesc"></div>
          </div>
        </div>
      </div>
      <div class="btns btns_wrap">
        <div class="btns_share mb20">
          <span class="btns_share_i">
            <div class="btn" @click="showModalFun('inquiry')">{{ $t("inquire-title") }}</div>
          </span>
          <div class="iconBox">
            <span class="btns_share_i ml20" v-if="JSON.stringify(companyInfo) !== '{}'">
              <exhibitor-collect :key="companyInfo.isCollect" />
            </span>
            <span class="btns_share_i" v-if="JSON.stringify(companyInfo) !== '{}'">
              <exhibitor-like :key="companyInfo.isLike" />
            </span>
            <span class="btns_share_i ml10 hand" @click="_initShare">
              <img src="@/assets/images/icon_share.png" alt="" class="img imgShare" /><span class="txt">{{ $t("exhibitor-detail-share") }}</span>
            </span>
          </div>
          <!-- 分享 -->
          <span class="btns_share_i shareIcon">
            <div id="share"></div>
          </span>
        </div>
      </div>
    </div>
    <!-- 询盘弹框 -->
    <el-dialog :title="$t('inquire-title')" :visible.sync="showInquire" :width="isMobile ? '90%' : '750px'" :close-on-click-modal="false" :top="isMobile ? '6vh' : '15vh'">
      <el-form :model="form" ref="form" :rules="rules">
        <el-form-item :label="$t('inquire-label-product')" prop="productId">
          <el-select v-model="form.productId" :placeholder="$t('inquire-placeholder-product')" style="width: 100%" clearable>
            <el-option v-for="item in listProduct" :key="item.id" :label="localeCn ? item.productName : item.productNameEn" :value="item.id"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('inquire-label-name')" prop="name">
          <el-input v-model="form.name" autocomplete="off" :maxlength="50" clearable :placeholder="$t('inquire-placeholder-name')"></el-input>
        </el-form-item>
        <el-form-item :label="$t('inquire-label-phone')" prop="phone">
          <el-input v-model="form.phone" autocomplete="off" :maxlength="50" clearable :placeholder="$t('inquire-placeholder-phone')"></el-input>
        </el-form-item>
        <el-form-item :label="$t('inquire-label-email')" prop="email">
          <el-input v-model="form.email" autocomplete="off" :maxlength="50" clearable :placeholder="$t('inquire-placeholder-email')"></el-input>
        </el-form-item>
        <el-form-item :label="$t('inquire-label-num')" prop="num">
          <el-input v-model="form.num" autocomplete="off" clearable :maxlength="10" :placeholder="$t('inquire-placeholder-num')"></el-input>
        </el-form-item>
        <el-form-item :label="$t('inquire-label-remark')" prop="remark">
          <el-input v-model="form.remark" autocomplete="off" clearable type="textarea" :rows="3" :maxlength="200" :placeholder="$t('inquire-placeholder-remark')"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <span class="btnHa btnHa-border" @click="reset">{{ $t("inquire-btn-cancel") }}</span>
        <span class="btnHa btnHa-bg" @click="submit">{{ $t("inquire-btn-ok") }}</span>
      </div>
    </el-dialog>
    <!-- 小样弹框 -->
    <el-dialog :title="$t('sample-title')" :visible.sync="showSample" :width="isMobile ? '90%' : '750px'" :close-on-click-modal="false" :top="isMobile ? '6vh' : '15vh'">
      <el-form :model="formSample" ref="formSample" :rules="rulesSample">
        <el-form-item :label="$t('inquire-label-product')" prop="productId">
          <el-select v-model="formSample.productId" :placeholder="$t('inquire-placeholder-product')" style="width: 100%" clearable>
            <el-option v-for="item in listProduct" :key="item.id" :label="localeCn ? item.productName : item.productNameEn" :value="item.id"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('sample-label-name')" prop="name">
          <el-input v-model="formSample.name" autocomplete="off" :maxlength="50" clearable :placeholder="$t('sample-placeholder-name')"></el-input>
        </el-form-item>
        <el-form-item :label="$t('sample-label-phone')" prop="phone">
          <el-input v-model="formSample.phone" autocomplete="off" :maxlength="50" clearable :placeholder="$t('sample-placeholder-phone')"></el-input>
        </el-form-item>
        <el-form-item :label="$t('sample-label-email')" prop="email">
          <el-input v-model="formSample.email" autocomplete="off" :maxlength="50" clearable :placeholder="$t('sample-placeholder-email')"></el-input>
        </el-form-item>
        <el-form-item :label="$t('sample-label-num')" prop="num">
          <el-input v-model="formSample.num" autocomplete="off" clearable :maxlength="10" :placeholder="$t('sample-placeholder-num')"></el-input>
        </el-form-item>
        <el-form-item :label="$t('sample-label-remark')" prop="remark">
          <el-input v-model="formSample.remark" autocomplete="off" clearable type="textarea" :rows="3" :maxlength="200" :placeholder="$t('sample-placeholder-remark')"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <span class="btnHa btnHa-border" @click="resetSample">{{ $t("sample-btn-cancel") }}</span>
        <span class="btnHa btnHa-bg" @click="submitSample">{{ $t("sample-btn-ok") }}</span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { sample, inquiry } from "@/api/common";
import { share } from "@/api/exhibitor";
import util from "@/libs/util";
export default {
  dicts: ["catalogue_exhibitor_category", "stand_type"],
  props: {
    listProduct: {
      type: Array,
      default: () => []
    },
  },
  computed: {
    cid() {
      return this.$route.params.cid;
    },
    companyInfo() {
      return this.$store.state.seo.pageContent;
    },
    // 展商类别数组
    listCategoryAll() {
      return util.setDictRaw2Up(this.dict.type.catalogue_exhibitor_category);
    },
    /**
     * 通过value数组从数据字典里取label值
     */
    labels() {
      const list = this.companyInfo.exhibitorCategory.split(",");
      const item = util.findArrItemInArr(list, this.listCategoryAll, "value");
      return (
        item &&
        item.targetArr
          .map((itemJ) => {
            return this.localeCn ? itemJ.label : itemJ.labelEn;
          })
          .join(", ")
      );
    },
    // 展位类型数组
    listStandTypeAll() {
      return util.setDictRaw2Up(this.dict.type.stand_type);
    },
    // 展位类型
    standType() {
      if (this.localeCn) {
        return util.findLabelFromVal(this.listStandTypeAll, this.companyInfo.standType);
      } else {
        return util.findLabelEnFromVal(this.listStandTypeAll, this.companyInfo.standType);
      }
    },
  },
  data() {
    return {
      showModalFun(type) {
        if (this.listProduct&&this.listProduct.length == 0) {
          this.$message.warning(this.$t("exhibitor.detail.tip"));
        } else {
          if (type == "inquiry") {
            this.showInquire = true;
          } else if (type == "sample") {
            this.showSample = true;
          }
        }
      },
      showInquire: false,
      form: {
        productId: "",
        name: "",
        phone: "",
        num: "",
        remark: "",
        email: "",
      },
      rules: {
        productId: [
          {
            required: true,
            message: this.$t("inquire-placeholder-product"),
            trigger: "change",
          },
        ],
        name: [
          {
            required: true,
            message: this.$t("inquire-placeholder-name"),
            trigger: "blur",
          },
        ],
        phone: [
          {
            required: true,
            message: this.$t("inquire-placeholder-phone"),
            trigger: "blur",
          },
        ],
        num: [
          {
            required: true,
            message: this.$t("inquire-placeholder-num"),
            trigger: "blur",
          },
        ],
        remark: [
          {
            required: true,
            message: this.$t("inquire-placeholder-remark"),
            trigger: "blur",
          },
        ],
        email: [
          {
            required: true,
            message: this.$t("inquire-placeholder-email"),
            trigger: "blur",
          },
          {
            validator: (rule, value, callback) => {
              let reg = /^[\w.+-\u4e00-\u9fa5]+@[\w-]+(\.[\w-]+)+$/;
              if (!reg.test(value) && value) {
                callback(new Error(this.$t("login-placeholder-email-format")));
              }
              callback();
            },
            trigger: "blur",
          },
        ],
      },
      showSample: false, //索取小样
      formSample: {
        productId: "",
        name: "",
        phone: "",
        num: "",
        remark: "",
        email: "",
      },
      rulesSample: {
        productId: [
          {
            required: true,
            message: this.$t("inquire-placeholder-product"),
            trigger: "change",
          },
        ],
        name: [
          {
            required: true,
            message: this.$t("inquire-placeholder-name"),
            trigger: "blur",
          },
        ],
        phone: [
          {
            required: true,
            message: this.$t("inquire-placeholder-phone"),
            trigger: "blur",
          },
        ],
        num: [
          {
            required: true,
            message: this.$t("inquire-placeholder-num"),
            trigger: "blur",
          },
        ],
        remark: [
          {
            required: true,
            message: this.$t("inquire-placeholder-remark"),
            trigger: "blur",
          },
        ],
        email: [
          {
            required: true,
            message: this.$t("inquire-placeholder-email"),
            trigger: "blur",
          },
          {
            validator: (rule, value, callback) => {
              let reg = /^[\w.+-\u4e00-\u9fa5]+@[\w-]+(\.[\w-]+)+$/;
              if (!reg.test(value) && value) {
                callback(new Error(this.$t("login-placeholder-email-format")));
              }
              callback();
            },
            trigger: "blur",
          },
        ],
      },
    };
  },
  mounted() {
    // this.initProductId();
  },
  methods: {
    // initProductId() {
    //   this.$nextTick(() => {
    //     if (this.listProduct && this.listProduct.length > 0) {
    //       this.form.productId = this.listProduct[0]["id"];
    //       this.formSample.productId = this.listProduct[0]["id"];
    //     }
    //   });
    // },
    reset() {
      this.$refs.form.resetFields();
      this.showInquire = false;
    },
    resetSample() {
      this.$refs.formSample.resetFields();
      this.showSample = false;
    },
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.invoke(inquiry, this.form).then((res) => {
            if (res && res.code == 200) {
              this.$message.success(this.$t("inquire-publish-success"));
              this.showInquire = false;
              this.form.name = "";
              this.form.phone = "";
              this.form.num = "";
              this.form.email = "";
              this.form.remark = "";
            }
          });
        }
      });
    },
    submitSample() {
      this.$refs.formSample.validate((valid) => {
        if (valid) {
          this.invoke(sample, this.formSample).then((res) => {
            if (res && res.code == 200) {
              this.$message.success(this.$t("sample-publish-success"));
              this.showSample = false;
              this.formSample.name = "";
              this.formSample.phone = "";
              this.formSample.num = "";
              this.formSample.email = "";
              this.formSample.remark = "";
            }
          });
        }
      });
    },
    _initShare() {
      socialShare("#share", {
        sites: ["wechat"],
      });
      this.shareFun();
    },
    shareFun() {
      this.invoke(share, this.cid).then((res) => {
        if (res && res.code == 200) {
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.ml20 {
  margin-left: 20px;
}

.btn {
  $c: #d53b76;
  padding: 0 20px;
  height: 50px;
  background: $c;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 22px;
  cursor: pointer;
}

:deep(.el-dialog__body) {
  padding-top: 0;
}

.el-form-item {
  margin-bottom: 10px;
}

p {
  margin: 0;
}

.m {
  $wL: 300px;
  $wR: auto;
  $gutter: 60px;

  display: flex;
  background-color: #fff;
  border-radius: 10px;
  padding: 90px 50px;
  margin-bottom: 100px;

  // 左侧
  &_l {
    width: $wL;
    flex: 0 0 $wL;
    height: $wL;
    border: 1px solid #f1f2f3;

    &_zoom {
      .imgBox {
        width: $wL;
        height: $wL;
        border-radius: 10px;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;

        .img {
          max-width: 90%;
          max-height: 90%;
        }
      }
    }
  }

  // 右侧
  &_r {
    width: $wR;
    flex: $wR;
    margin-left: $gutter;

    // 标题
    &_t {
      margin-bottom: 44px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      word-break: break-all;
      width: 100%;
      font-size: 32px;
      max-height: 3em;
      color: #000;
      box-sizing: border-box;
      margin-top: 0;
    }

    &_txt {
      font-size: 18px;
      color: #8b8b8b;
      line-height: 1.8;

      &:not(:last-child) {
        margin-bottom: 1em;
      }
    }

    &_descBox {
      :deep(p) {
        margin: 0;
      }
      overflow: hidden;
    }

    // key-val布局
    .lr {
      margin-bottom: 30px;
      display: flex;

      .key {
        $w: 100px;
        flex: 0 0 $w;
        display: block;
        white-space: nowrap;
      }

      .val {
        text-align: justify;
      }

      &.en {
        .key {
          $w: auto;
          flex: 0 0 $w;
          margin-right: 4px;
        }
      }
    }
  }

  .btns {
    display: flex;
    align-items: center;
    margin-top: 20px;

    &_wrap {
      flex-wrap: wrap;

      .mb20 {
        margin-bottom: 20px;
      }

      .btns_share {
        $w: 100%;
        width: $w;
        flex: 0 0 $w;
      }
    }

    // 分享
    &_share {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-grow: 1;

      .share-component {
        display: flex;
      }
      .iconBox {
        width: 600px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      &_i {
        display: flex;
        align-items: flex-end;
        margin-right: 20px;

        .txt {
          color: #8b8b8b;
          font-size: 16px;
          white-space: nowrap;
        }

        .img {
          width: 18px;
          &.imgShare {
            width: 30px;
            margin-right: 10px;
          }
        }

        :deep(.social-share) {
          $sc: 23/19;
          $w: 30px;
          $h: calc(#{$w} / #{$sc});

          .social-share-icon {
            border: none;
            border-radius: unset;
            width: $w;
            height: $h;
            background-size: $w $h;
            background-position: center;
            background-repeat: no-repeat;
            background-color: transparent;
            margin-right: 20px;

            &::before {
              display: none;
            }
          }

          .icon-weibo {
            background-image: url("@/assets/img/product/icon_weibo.png");
          }

          .icon-wechat {
            background-image: url("@/assets/img/product/icon_wechat.png");
            margin-right: 0;
          }
        }
      }
    }
  }
}

@media (min-width: 1441px) and (max-width: 1750px) {
  @function scale($currentSize) {
    @return calc(#{$currentSize} * #{$global_scale_1600});
  }

  .ml20 {
    margin-left: scale(20px);
  }

  .btn {
    padding: 0 scale(20px);
    height: scale(50px);
    font-size: scale(22px);
  }

  .el-form-item {
    margin-bottom: scale(10px);
  }

  .m {
    $wL: scale(300px);
    $wR: auto;
    $gutter: scale(60px);

    border-radius: scale(10px);
    padding: scale(90px) scale(50px);
    margin-bottom: scale(100px);

    // 左侧
    &_l {
      width: scale($wL);
      flex: 0 0 $wL;
      height: $wL;

      &_zoom {
        .imgBox {
          width: $wL;
          height: $wL;
          border-radius: scale(10px);
        }
      }
    }

    // 右侧
    &_r {
      width: $wR;
      flex: $wR;
      margin-left: $gutter;

      // 标题
      &_t {
        margin-bottom: scale(44px);
        font-size: scale(32px);
        max-height: scale(3em);
      }

      &_txt {
        font-size: scale(18px);

        &:not(:last-child) {
          margin-bottom: scale(1em);
        }
      }

      // key-val布局
      .lr {
        margin-bottom: scale(30px);

        .key {
          $w: scale(100px);
          width: $w;
          flex: 0 0 $w;
        }

        &.en {
          .key {
            $w: scale(140px);
            width: $w;
            flex: 0 0 $w;
            margin-right: scale(4px);
          }
        }
      }
    }

    .btns {
      &_wrap {
        .mb20 {
          margin-bottom: scale(20px);
        }
      }

      // 分享
      &_share {
        .iconBox {
          width: scale(600px);
        }
        &_i {
          margin-right: scale(20px);

          :deep(.social-share) {
            $sc: scale(25/20);
            $w: scale(30px);
            $h: calc(#{$w} / #{$sc});

            .social-share-icon {
              width: $w;
              height: $h;
              background-size: $w $h;
              margin-right: scale(20px);
            }
          }
        }
      }
    }
  }
}

@media screen and (min-width: 1100px) and (max-width: 1440px) {
  @function scale($currentSize) {
    @return calc(#{$currentSize} * #{$global_scale_1600});
  }

  .ml20 {
    margin-left: scale(20px);
  }

  .btn {
    padding: 0 scale(20px);
    height: scale(50px);
    font-size: scale(18px);
  }

  .el-form-item {
    margin-bottom: scale(10px);
  }

  .m {
    $wL: scale(300px);
    $wR: auto;
    $gutter: scale(60px);

    border-radius: scale(10px);
    padding: scale(90px) scale(50px);
    margin-bottom: scale(100px);

    // 左侧
    &_l {
      width: scale($wL);
      flex: 0 0 $wL;
      height: $wL;

      &_zoom {
        .imgBox {
          width: $wL;
          height: $wL;
          border-radius: scale(10px);
        }
      }
    }

    // 右侧
    &_r {
      width: $wR;
      flex: $wR;
      margin-left: $gutter;

      // 标题
      &_t {
        margin-bottom: scale(44px);
        font-size: scale(32px);
        max-height: scale(3em);
      }

      &_txt {
        font-size: scale(18px);

        &:not(:last-child) {
          margin-bottom: scale(1em);
        }
      }

      // key-val布局
      .lr {
        margin-bottom: scale(30px);

        .key {
          $w: scale(100px);
          width: $w;
          flex: 0 0 $w;
        }

        &.en {
          .key {
            $w: scale(140px);
            width: $w;
            flex: 0 0 $w;
            margin-right: scale(4px);
          }
        }
      }
    }

    .btns {
      &_wrap {
        .mb20 {
          margin-bottom: scale(20px);
        }
      }

      // 分享
      &_share {
        .iconBox {
          width: scale(450px);
        }
        &_i {
          margin-right: scale(20px);

          :deep(.social-share) {
            $sc: scale(25/20);
            $w: scale(30px);
            $h: calc(#{$w} / #{$sc});

            .social-share-icon {
              width: $w;
              height: $h;
              background-size: $w $h;
              margin-right: scale(20px);
            }
          }
        }
      }
    }
  }
}

@media (max-width: 767px) {
  @function scale($currentSize) {
    @return calc(#{$currentSize} * #{$global_scale_750});
  }

  .ml20 {
    margin-left: scale(20px);
  }

  .btn {
    padding: 0 scale(20px);
    height: 30px;
    width: 90px;
    font-size: scale(22px);
  }

  .el-form-item {
    margin-bottom: scale(10px);
  }

  .m {
    $wL: 150px;
    $wR: auto;
    $gutter: scale(60px);
    flex-direction: column;

    border-radius: scale(10px);
    padding: scale(90px) scale(50px) 20px;
    margin-bottom: scale(100px);

    // 左侧
    &_l {
      width: $wL;
      flex: 0 0 $wL;
      height: $wL;

      &_zoom {
        width: $wL;
        height: $wL;

        .imgBox {
          width: $wL;
          height: $wL;
          border-radius: scale(10px);
        }
      }
    }

    // 右侧
    &_r {
      width: $wR;
      flex: $wR;
      margin-left: 0;
      margin-top: 20px;

      // 标题
      &_t {
        margin-bottom: scale(44px);
        font-size: scale(32px);
        max-height: scale(3em);
      }

      &_txt {
        font-size: scale(18px);

        &:not(:last-child) {
          margin-bottom: scale(1em);
        }
      }

      // key-val布局
      .lr {
        margin-bottom: scale(30px);
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;

        .key {
          $w: 60px;
          width: $w;
          flex: 0 0 auto;
        }

        &.en {
          .key {
            $w: scale(140px);
            width: $w;
            flex: 0 0 $w;
            margin-right: scale(4px);
          }
        }
      }
    }

    .btns {
      &_wrap {
        .mb20 {
          margin-bottom: scale(20px);
        }
      }

      // 分享
      &_share {
        flex-direction: column;
        .iconBox {
          width: 100%;

          margin-top: 20px;
        }
        &_i {
          align-items: center;
          margin-right: 0;
          &:first-child {
            margin-left: 0 !important;
          }
          .img.imgShare {
            width: 16px;
            height: 16px;
            margin-right: 0;
          }
          .txt {
            font-size: 14px;
            margin-left: 10px;
          }
          &.shareIcon {
            margin-top: 10px;
          }
          :deep(.social-share) {
            $w: 23px;
            $h: 19px;

            .social-share-icon {
              width: $w;
              height: $h;
              background-size: $w $h;
              margin-right: 0;
              margin-top: 10px;
            }
          }
        }
      }
    }
  }
}
</style>
<style lang="scss" scoped>
@media (min-width: 768px) and (max-width: 1570px) {
  .m .btns_share_i {
    .img.imgShare {
      width: 20px;
      height: 20px;
    }
    .txt {
      font-size: 14px;
    }
  }
}
</style>
<!-- 弹框内的按钮 -->
<style lang="scss" scoped>
.btnHa {
  $c: #d53b76;
  padding: 0 24px;
  height: 50px;
  font-size: 18px;
  width: auto;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  &-bg {
    background: $c;
    color: #fff;
  }
  &-border {
    border: 1px solid $c;
    color: $c;
  }
  @media (min-width: 1441px) and (max-width: 1750px) {
    @function scale($currentSize) {
      @return calc(#{$currentSize} * #{$global_scale_1600});
    }
    padding: 0 scale(24px);
    height: scale(50px);
    font-size: scale(18px);
  }
  @media screen and (min-width: 1281px) and (max-width: 1440px) {
    @function scale($currentSize) {
      @return calc(#{$currentSize} * #{$global_scale_1440});
    }
    padding: 0 scale(24px);
    height: scale(50px);
    font-size: scale(18px);
  }
  @media screen and (min-width: 768px) and (max-width: 1280px) {
    @function scale($currentSize) {
      @return calc(#{$currentSize} * #{$global_scale_1280});
    }
    padding: 0 scale(24px);
    height: scale(50px);
    font-size: scale(18px);
  }
  @media (max-width: 767px) {
    @function scale($currentSize) {
      @return calc(#{$currentSize} * #{$global_scale_750});
    }
    padding: 0 10px;
    height: 24px;
    font-size: 14px;
  }
}
</style>
